<template>
	<view class="goodsDetails-main">
		<view class="navBar-wrap" :style="'background-color: rgba(255,255,255,'+opacityStyle+');'">
			<view class="status_bar"></view>
			<view class="content-bar">
				<view class="left flex-center" @click="goBack">
					<text class="goback flex-center" v-if="opacityStyle<0.5">
						<text class="iconfont cell-arrow-icon">&#xe603;</text>
					</text>
					<text class="iconfont" v-else>&#xe603;</text>
				</view>
				<view class="center" :style="'opacity:'+opacityStyle">
					<text :class="['center-item',{'center-active':index==tabsIndex}]" v-for="(item,index) in tabsList" @click="clickTabsActio(index)">{{item.text}}</text>
				</view>
				<view class="right"></view>
			</view>
		</view>
		<scroll-view class="scroll-wrap" @scroll="scroll" :scroll-top="scrollTopValue" scroll-y="true">
			<swiper class="swiper-box" indicator-dots circular indicator-color="#FFFFFF" indicator-active-color="#fa2c19">
			    <swiper-item v-for="(item ,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image class="banner-img" :src="item.imgHref"></image>
					</view>
			    </swiper-item>
			</swiper>
			<view class="introduce-box">
				<text class="title">曼秀雷敦什果冰润唇膏滋润嘴唇保湿女男士（演示商品 不发货）</text>
				<view class="price-view">
					<text>￥</text>
					<text class="price-count">16</text>
					<text>.90</text>
					<text class="tag">免邮费</text>
				</view>
				<view class="record-view">
					<text class="record-column">销量: 678</text>
					<text class="record-column">库存: 7011</text>
					<text class="record-column">浏览量: 2668</text>
				</view>
			</view>
			<view class="share-box" @click="shareAction">
				<view class="share-left">
					<text class="iconfont share-icon">&#xe602;</text>
					<text class="share-left-text">该商品分享可领49减10红包</text>
				</view>
				<view class="share-right">
					<text>立即分享</text><text class="iconfont rigt-arrow-icon">&#xe60a;</text>
				</view>
			</view>
			<view class="cell-box">
				<view class="cell-column b-b" @click="showPopupTool=true">
					<text class="label">购买类型</text>
					<text class="text">【果汁清香】青提+葡萄</text>
					<text class="iconfont cell-arrow-icon">&#xe60a;</text>
				</view>
				<view class="cell-column b-b">
					<text class="label">优惠券</text>
					<text class="text coupon-text">领取优惠券</text>
					<text class="iconfont cell-arrow-icon">&#xe60a;</text>
				</view>
				<view class="cell-column">
					<text class="label">服务</text>
					<text class="text">7天无理由退换货 · 假一赔十</text>
					<text class="iconfont cell-arrow-icon">&#xe60a;</text>
				</view>
			</view>
			<view class="evaluate-box" id="evaluateId">
				<view class="evaluate-header">
					<text class="title">商品评价(4)</text>
					<text class="tip">好评率 75.0%</text>
					<text class="iconfont arrow-icon">&#xe60a;</text>
				</view>
				<view class="evaluate-row">
					<image src="/static/images/resources/goods-02.jpg" class="avatar"></image>
					<view class="right">
						<view class="top">
							<text class="name">鹿尾儿</text>
							<text class="iconfont stars-icon stars-active">&#xe66a;</text>
							<text class="iconfont stars-icon stars-active">&#xe66a;</text>
							<text class="iconfont stars-icon stars-active">&#xe66a;</text>
							<text class="iconfont stars-icon">&#xe66a;</text>
							<text class="iconfont stars-icon">&#xe66a;</text>
						</view>
						<view class="content">
							上嘴后很清爽，味道也特特特好闻，大约那么长，唇膏不算大，强烈推荐葡萄味的!
						</view>
						<view class="pic-wrap">
							<image class="pic" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595754343519820465.jpg"></image>
							<image class="pic" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595754343519820465.jpg"></image>
							<image class="pic" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595754343519820465.jpg"></image>
						</view>
						<view class="bottom">
							<text class="time">2020-07-26 18:18</text>
							<text class="specs">购买类型：【果汁清香】青提 葡萄 2支装</text>
						</view>
					</view>
				</view>
			</view>
			<view class="describe-box" id="describeId">
				<view class="title">
					<text class="title-text">图文详情</text>
				</view>
				<view class="describe-content">
					<img src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657058872053476.jpg" />
					<img src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657065672217043.jpg" />
					<img src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657072497948919.jpg"/>
					<img src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657079737820925.jpg"/>
					<img src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657086949749210.jpg"/>
					<img src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657094183614212.jpg"/>
				</view>
			</view>
		</scroll-view>
		<view class="footer-wrap">
			<view class="left">
				<view class="left-column flex-center">
					<text class="iconfont">&#xe7bb;</text>
					<view class="text">客服</view>
				</view>
				<view class="left-column flex-center">
					<text class="iconfont">&#xe601;</text>
					<view class="text">购物车</view>
				</view>
				<view class="left-column flex-center">
					<text class="iconfont">&#xe600;</text>
					<view  class="text">收藏</view>
				</view>
			</view>
			<view class="right flex-center">
				<text class="right-column flex-center car-btn">加入购物车</text>
				<text class="right-column flex-center buy-btn" @click="paymentAction">立即购买</text>
			</view>
		</view>
		<view class="popup-wrap" v-if="showPopupTool">
			<view class="cover" @click="showPopupTool=false"></view>
			<view class="specs-box">
				<view class="product-info-header">
					<image class="goods-avator" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657309180697883.jpg"></image>
					<view class="info-right">
						<view class="price">￥16.9</view>
						<view class="stock">库存：460</view>
						<view class="specs">规格：{{specsList[specsIndex]}}</view>
					</view>
				</view>
				<view class="product-info-center">
					<view class="title">款式</view>
					<view class="content">
						<text :class="['specs-item round flex-center',{active:index==specsIndex}]" v-for="(item,index) in specsList" @click="specsIndex=index">{{item}}</text>
					</view>
				</view>
				<view class="product-info-bottom">
					<text class="text">数量</text>
					<uni-number-box @change="bindNumberChange"></uni-number-box>
				</view>
				<view class="btn-wrap">
					<text class="btn-column flex-center car-btn">加入购物车</text>
					<text class="btn-column flex-center buy-btn" @click="paymentAction">立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/static/js/util';
	export default {
		data() {
			return {
				bannerList: [{
					imgHref: 'https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657054187475813.jpg'
				},{
					imgHref: 'https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657054187227254.jpg'
				}],
				opacityStyle: 0,
				tabsList: [{
					text: '商品',
					scrollTopValue: 0
				},{
					text: '评价',
					scrollTopValue: 0
				},{
					text: '详情',
					scrollTopValue: 0
				}],
				tabsIndex: 0,
				scrollTopValue: 0,
				showPopupTool: false,
				specsIndex: 0,
				specsList: ['【卸妆护唇】草莓','【三重护唇】柠檬','【抵御阳光】苹果','【果汁清香】青提+葡萄','【唇妆显色】香橙+蜜柑']
			};
		},
		onLoad() {
			let _this = this
			_this.$nextTick(function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#evaluateId').boundingClientRect(data => {
					_this.tabsList[1].scrollTopValue = parseInt(data.top) -70
				}).exec();
				query.select('#describeId').boundingClientRect(data => {
					_this.tabsList[2].scrollTopValue = parseInt(data.top) - 70
				}).exec(); 
			});

		},
		methods: {
			scroll(e) {
				let _this = this
				let scrollTop = e.detail.scrollTop
				
				let opacityStyle = (scrollTop/150).toFixed(3)
				_this.opacityStyle = opacityStyle > 1 ? 1 : opacityStyle
				
				let tabsIndex = this.tabsIndex
				this.tabsList.forEach((item,index)=> {
					if(scrollTop>(item.scrollTopValue-2)) {
						tabsIndex = index
					}
				})
				if(this.tabsIndex!=tabsIndex) {
					this.tabsIndex = tabsIndex
					this.scrollTopValue = scrollTop
				}
			},
			clickTabsActio(index) {
				this.tabsIndex = index
				let current = this.tabsList[index]
				this.scrollTopValue = current.scrollTopValue
			},
			goBack() {
				util.goBack()
			},
			shareAction() {
				if(process.env.VUE_APP_PLATFORM=='app-plus') {
					uni.share({
					    provider: "weixin",
					    scene: "WXSceneSession",
					    type: 0,
					    href: "https://xsphehe.com/",
					    title: "落魄的小前端",
					    summary: "生活不止眼前的苟且，还有加不完的班和改不完的BUG",
					    imageUrl: "https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/1595657054187475813.jpg",
					    success: function (res) {
					        console.log("success:" + JSON.stringify(res));
					    },
					    fail: function (err) {
					        console.log("fail:" + JSON.stringify(err));
					    }
					});
				}
				
			},
			paymentAction() {
				// uni.requestPayment({
				//     provider: 'alipay',
				//     orderInfo: 'orderInfo', //微信、支付宝订单数据
				//     success: function (res) {
				//         console.log('success:' + JSON.stringify(res));
				//     },
				//     fail: function (err) {
				//         console.log('fail:' + JSON.stringify(err));
				//     }
				// });
				
				
				
				util.jumpPage('/pages/goodsPayment/goodsPayment')
			},
			bindNumberChange(value) {
				console.log(value)
			}
		}
	}
</script>

<style lang="scss">
	@import "./goodsDetails.scss";
</style>
